import { ExclamationCircleOutlined } from "@ant-design/icons";
import { message, Modal } from "antd";
import React, { useState, useEffect } from "react";
import { useHistory, useParams } from "react-router-dom";
import ArticleDetailCom from "../../../components/ArticleDetailCom";
import SettingArticle from "../../../components/ArticleDetailCom/DrawerMultilayer/SettingArticle";
import api from "../../../api/index";
const ArticleDetail = () => {
  const history = useHistory();
  const params = useParams();
  const [detailInfo, setDetailInfo] = useState({});
  const [OssFileVisible, setOssFileVisible] = useState(false);
  const [SettingVisible, setSettingVisible] = useState(false);
  useEffect(() => {
    init();
  }, []);
  const init = () => {};
  //打开setting弹框
  const openSettingVisible = () => {
    setSettingVisible(true);
  };
  //关闭setting弹框
  const closeSettingVisible = () => {
    setSettingVisible(false);
  };
  //打开oss抽屉弹框
  const openOssFileVisible = () => {
    setOssFileVisible(true);
  };
  //关闭oss抽屉弹框
  const closeOssFileVisible = () => {
    setOssFileVisible(false);
  };
  const handlerDetailInfo = (value, type) => {
    detailInfo[type] = value;
    setDetailInfo({ ...detailInfo });
  };
  //删除
  const delArticleList = async () => {
    const res = await api.delArticle({ id: detailInfo.id });
    if (res.success) {
      message.success("删除成功");
      history.push("/allarticle");
    }
  };
  //是否确认删除
  const isExecuteHandlerDelClick = () => {
    Modal.confirm({
      title: "确认删除？",
      icon: <ExclamationCircleOutlined />,
      content: "删除内容后，无法恢复。",
      cancelText: "取消",
      okText: "确认",
      onOk() {
        delArticleList();
      },
    });
  };
  //保存草稿
  const saveArticleDrafts = async () => {
    await addArticle();
    await api.batchDftArticle({ batchList: [{ id: detailInfo.id }] });
    message.success("文章已保存为草稿");
  };
  //发布
  const publicArticle = async () => {
    await addArticle();
    await api.batchPubArticle({ batchList: [{ id: detailInfo.id }] });
    message.success("文章已发布");
  };
  //新增数据
  const addArticle = async () => {
    const res = await api.addArticle({ ...detailInfo });
    detailInfo.id = res.data.id;
    await history.push("/article/" + res.data.id);
  };
  const messageFn = () => {
    if (!detailInfo.title) {
      message.warning("请输入文章标题");
    }
  };
  return (
    <div className="article-detail">
      <ArticleDetailCom
        editorRtValue={detailInfo?.content} //markdown绑定的value
        editorChange={(e) => handlerDetailInfo(e, "content")} //markdown value值onChange事件
        editorStyle={{ height: 650 }} //markdown 样式
        headerValue={detailInfo?.title} //title标题 value
        handlerId={detailInfo?.id} //数据id
        OssFileVisible={OssFileVisible} //oss抽屉的visible
        SettingVisible={SettingVisible} //setting抽屉的visible
        openSettingVisible={openSettingVisible} //打开setting
        closeSettingVisible={closeSettingVisible} //关闭setting
        openOssFileVisible={openOssFileVisible} //打开oss
        closeOssFileVisible={closeOssFileVisible} //关闭oss
        handlerDataInfo={handlerDetailInfo} //改变绑定的数据info
        handlerPublicBtn={publicArticle} //发布按钮事件
        handlerDraftsBtn={saveArticleDrafts} //保存草稿按钮
        isExecuteHandlerDelClick={isExecuteHandlerDelClick} //确认删除
        isDisableCheckBtn
        isDisableDelBtn
        messageFn={messageFn}
      >
        <SettingArticle
          handlerInfo={detailInfo} //操作的数据
          openOssFileVisible={openOssFileVisible} //打开oss
          closeOssFileVisible={closeOssFileVisible} //关闭
          handlerDataInfo={handlerDetailInfo} //操作数据
          closeSettingVisible={closeSettingVisible} //关闭setting
        ></SettingArticle>
      </ArticleDetailCom>
    </div>
  );
};

export default ArticleDetail;
